<template>
  <div class="role-manage-index sub-margin">
    <!-- <div class="sub-page-title">角色管理</div> -->
    <div class="content">
      <div class="left-con">
        <RoleList :source="roleList" @node-click="onRoleClick"></RoleList>
      </div>
      <div class="right-con">
        <div class="create-role-box">
          <!-- <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="openDialog">新建角色</el-button> -->
        </div>
        <template v-if="roleList.length">
          <el-scrollbar class="role-info">
            <section class="form-sec">
              <p class="sec-title">角色基本信息</p>
              <RoleForm :type="'view'" :info="curRole" ref="pageRoleForm" @submit="onRoleSubmit"></RoleForm>
            </section>
            <section class="quanxian-sec">
              <p class="sec-title">角色权限信息</p>
              <RoleMenuTree :menuIds="menuIds" ref="roleMenuTree"></RoleMenuTree>
            </section>
          </el-scrollbar>

          <!-- <div class="bottom-btn">
            <el-button type="primary" size="small" @click.stop="editRole">确定</el-button>
          </div> -->
        </template>
        <template v-else>
          <Empty></Empty>
        </template>
      </div>
    </div>
    <RoleDialog :type="'add'" :visible.sync="showRoleDialog" ref="roleDialog">
      <RoleForm slot="baseInfo" :type="'add'" ref="roleBaseInfo" @submit="onRoleSubmit"></RoleForm>
      <RoleMenuTree slot="qxInfo"></RoleMenuTree>
      <div slot="bottom" class="btn-box">
        <el-button type="primary" size="small" @click.stop="onFormSave('1')">完成</el-button>
        <el-button type="primary" size="small" @click.stop="onFormSave('2')">完成后并继续添加</el-button>
        <el-button size="small" @click.stop="closeDialog">取消</el-button>
      </div>
    </RoleDialog>
  </div>
</template>
<script>
import Empty from '@com/Empty.vue'
import RoleList from './components/RoleList.vue'
import RoleForm from './components/RoleForm.vue'
import RoleMenuTree from './components/RoleMenuTree.vue'
import RoleDialog from './components/RoleDialog.vue'
import { listRoleData, saveOrEditRole, getRoleDetail } from '@api/modules/system.js'

export default {
  name: 'roleManageIndex',
  components: { RoleList, RoleForm, RoleDialog, RoleMenuTree, Empty },
  emits: [],
  props: {},
  data() {
    return {
      roleList: [],
      curRole: {},
      showRoleDialog: false,
      saveType: '1',
      menuIds: [],
    }
  },
  watch: {},
  computed: {},
  created() {
    this.getRoleList()
  },
  mounted() {},
  methods: {
    async getRoleList() {
      const { status, data } = await listRoleData()
      if (status === 200 && data && data.length) {
        this.roleList = data
      } else {
        this.roleList = []
      }
    },
    onRoleClick(obj) {
      this.curRole = obj
      this.initdata()
    },
    /* 初始化数据 */
    initdata() {
      this.height = 0
      getRoleDetail({ id: this.curRole.id }).then(res => {
        if (res.status === 200) {
          this.menuIds = [...res.data.menuIds]
          this.$nextTick(() => {
            this.$refs.roleMenuTree && this.$refs.roleMenuTree.initdata()
          })
        }
      })
    },
    openDialog() {
      this.showRoleDialog = true
    },
    onFormSave(type) {
      this.saveType = type
      this.$refs.roleBaseInfo && this.$refs.roleBaseInfo.submitForm()
    },
    closeDialog() {
      this.$refs.roleDialog && this.$refs.roleDialog.closeDialog()
    },
    // 更新角色信息
    editRole() {
      this.$refs.pageRoleForm && this.$refs.pageRoleForm.submitForm()
    },
    async onRoleSubmit(obj) {
      console.log(obj)
      const { status } = await saveOrEditRole(obj)
      if (status === 200) {
        this.$message.success(obj.id ? '更新成功' : '添加成功')
        this.getRoleList()
        if (!obj.id && this.saveType === '1') {
          this.closeDialog()
        }
        if (!obj.id && this.saveType === '2') {
          this.$refs.roleBaseInfo && this.$refs.roleBaseInfo.resetForm()
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';

.role-manage-index {
  display: flex;
  flex-direction: column;
  height: calc(100% - 20px);
  overflow: hidden;

  .content {
    flex: 1;
    display: flex;
    align-items: stretch;
    padding: 20px 0;
    height: calc(100% - 50px);

    .left-con {
      width: 300px;
      height: 100%;
      overflow: auto;
      position: relative;
      border-right: 1px solid #e4eaf0;
    }

    .right-con {
      flex: 1;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      margin-left: 20px;
      position: relative;
      display: flex;
      flex-direction: column;

      .role-info {
        flex: 1;
      }

      .create-role-box {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
      }

      .sec-title {
        font-size: 14px;
        color: #333;
        line-height: 28px;
        margin-bottom: 10px;
        font-weight: 600;
      }

      .bottom-btn {
        text-align: center;
        border-top: 1px solid #e4eaf0;
        padding-top: 20px;

        .el-button {
          width: 120px;
          letter-spacing: 6px;
        }
      }
    }
  }
}
</style>
